<template>
  <div>
    <div class="container-wrapper">
        
    <template>  
      <el-row> <!--  style="margin-bottom: 40px;" -->
      <el-col :xs="24" :sm="24" :lg="24">
      <!-- <el-progress :text-inside="true" :stroke-width="26" :percentage="project_step" v-if="project_step"></el-progress> -->
			<!-- <progress_steps :cur_step="project_step" v-if="project_step"></progress_steps> -->
      <el-steps 
        :active="project_step"
        simple
        style="padding-left:5px;padding-right:5px;margin-bottom: 20px;font-size:10px"
        finish-status="success">
        <el-step title="立项/变更"></el-step>
        <el-step title="计划确定"></el-step>
        <el-step title="需求分析"></el-step>
        <el-step title="软件设计"></el-step>
        <el-step title="编码实现"></el-step>
        <el-step title="FC"></el-step>
        <el-step title="ST实施"></el-step>
        <el-step title="交付"></el-step>
        <el-step title="结项"></el-step>
      </el-steps>
      </el-col>
		</el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="ibox">
          <div class="ibox-title">
            <h5>项目进度</h5>
            <a :href="taskData.gantt" target="_blank" style="float: right">甘特图</a>
          </div>
          <div class="ibox-content ibox-heading">
            <div class="progress">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="percentStep"></el-progress>
              <!-- <div
                class="progress-bar progress-bar-success"
                :style="{width: percentStep + '%'}"
                role="progressbar"
                :aria-valuenow="percentStep"
                aria-valuemin="0"
                aria-valuemax="100"
              >{{ projectProgress }}
              </div> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>总任务</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins">{{ taskData.total_task }}</h1>
            <small>Total task</small>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>本周任务</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins">{{ taskData.week }}</h1>
            <small>Weekly task</small>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>本月任务</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins">{{ taskData.month }}</h1>
            <small>Monthly task</small>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>延期任务</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins" :class="taskData.overdue>0?'red':''">{{ taskData.overdue }}</h1>
            <small>Overdue task</small>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>缺陷总数</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins" :class="total_bug>0?'red':''">{{ total_bug }}</h1>
            <small>Total Bug Count</small>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>延期率</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins" :class="taskData.overdue_rate>0?'red':''">{{ getFix(taskData.overdue_rate, type='percent') }}</h1>
            <small>Overdue rate</small>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>即将延期任务</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins" :class="taskData.almostOverdue>0?'red':''">{{ taskData.almostOverdue }}</h1>
            <small>Overdueing task</small>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
        <div class="ibox">
          <div class="ibox-title">
            <h5>异常票</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins" :class="exceptionData.count>0?'red':''">{{ exceptionData.count }}</h1>
            <small>Exception</small>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="6" :sm="6" :lg="6" style="cursor: pointer"> 
        <div class="ibox">
          <div class="ibox-title">
            <h5>累计工时</h5>
          </div>
          <div class="ibox-content">
            <h1 class="no-margins">{{ workingHours }}</h1>
            <small>labor hours</small>
          </div>
        </div>      
           
      </el-col>
    </el-row>

    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="ibox">
          <div class="ibox-title">
            <h5>项目评分情况</h5>
          </div>
          <div class="ibox-content">
            <div>评分趋势</div>
            <div>
              <ve-line
                :data="scoreChartData"
                :settings="scoreChartSettings">
              </ve-line>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 需求 -->
    <chartreqprojectsummary></chartreqprojectsummary>

    <!-- 测试 -->
    <charttestprojectsummary></charttestprojectsummary>

    <!-- 缺陷 -->
    <chartbugprojectsummary v-on:totalBug="onTotalBug"></chartbugprojectsummary>

    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="ibox">
          <div class="ibox-title">
            <h5>工数投入</h5>
          </div>
          <div class="ibox-content">
            <div class="col-lg-12">工数投入/预期柱状图</div>
            <div>
              <ve-histogram
                :data="histogramChartData"
                :colors="chartColor"
                :legend-visible="true"
                :settings="histogramChartSettings">
              </ve-histogram>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
          <el-card class="box-card m-b" shadow="never">
              <div slot="header" class="clearfix" style="vertical-align:middle">
                  <div style="float: left; padding: 10px 0">人员投入趋势</div>
                  <el-radio-group @change="workChange" v-model="work" style="float: right; padding: 3px 0" size="mini">
                      <el-radio-button label="按月"></el-radio-button>
                      <el-radio-button label="按天"></el-radio-button>
                  </el-radio-group>                 
              </div>
              <div>
                  <ve-histogram
                      :data="workTrend"
                      :settings="workSettings"                                
                      :data-empty="workDataEmpty"
                      :loading="workLoading"
                      :data-zoom="dataZoom">
                  </ve-histogram>
              </div> 
          </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="ibox">
          <div class="ibox-title">
            <h5>版本发布计划</h5>
          </div>
          <div class="ibox-content">
            <div>
              <el-table
              :data="releaseInfo"
              :header-cell-style="tableHeaderColor"
              style="width: 100%; margin-bottom: 20px">
                <el-table-column
                prop="version"
                label="版本号"
                width="100"
                fixed>
                </el-table-column>
                <el-table-column prop="goal" label="目的" width="500"></el-table-column>
                <el-table-column prop="releaseContent" label="发布内容" width="500"></el-table-column>
                <el-table-column
                prop="planReleaseDate"
                label="计划发布日期"
                width="120"
                column-key="planReleaseDate"
                :filters="[{text: '2019-06-17', value: '2019-06-17'}, {text: '2019-06-24', value: '2019-06-24'}, {text: '2019-08-15', value: '2019-08-15'}]"
                :filter-method="filterHandler">
                </el-table-column>
                <el-table-column prop="actualReleaseDate" label="实际发布日期" width="120"></el-table-column>
                <el-table-column
                prop="releaseStatus"
                label="发布状态"
                width="100"
                :filters="[{text: '已发布', value: '已发布'}, {text: '未发布', value: '未发布'}]"
                :filter-method="filterStatus">
                </el-table-column>
                <el-table-column label="功能票数量" width="100">
                  <template slot-scope="scope">
                    <a href="#" style="text-decoration:underline">{{ scope.row.functionNum }}</a>
                  </template>
                </el-table-column>
                <el-table-column label="BUG数量" width="100">
                  <template slot-scope="scope">
                    <a href="#" style="text-decoration:underline">{{ scope.row.bugNum }}</a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    
    </template>
    
    </div>
  </div>
</template>

<script>
import progress_steps from '@/components/devops/progress_steps.vue';
import DatePickerSummary from './summary/DatePickerSummary.vue';
import ChartBugProjectSummary from './summary/ChartBugProjectSummary.vue';
import ChartReqProjectSummary from './summary/ChartReqProjectSummary.vue';
import ChartTestProjectSummary from './summary/ChartTestProjectSummary.vue';
import { mapState } from 'vuex'
import { getHeader } from '@/app.config';
import http from '@/views/sys/axios'

export default {
  name: 'projected',
  components: {
    progress_steps,
    chartbugprojectsummary: ChartBugProjectSummary,
    datepickersummary: DatePickerSummary,
    chartreqprojectsummary :ChartReqProjectSummary,
    charttestprojectsummary :ChartTestProjectSummary
  },
  data () {
    return {           
      project: null,
      projectProgress: 0,
      percentStep: 0,
      project_detail: {},
      project_step: 1, // null
      workingHours: 0,
      dataZoom: [{
        type: 'slider',
        start: 0,
        end: 100
      }],
      workLoading: false,
      workDataEmpty: false,
      workTrend: {
          columns: ['date', 'labor_hours'],
          rows: []
      },
      workSettings: {
          labelMap: {
              date: '日期',
              labor_hours: '工时(时)'
          }
      },
      type: '',
      work: '按月',
      dateTime: '',
      total_bug: 0,
      month: '',
      week: '',
      checked: false,
      releaseInfo: [
        // {version: '1.0', goal: '功能集成：全Feature97件，本次发布78件，全功能完成度达到80%',
        // releaseContent: '[Bluetooth設定]等78件Feature编码完成，单元测试实施完毕，基本动作OK。具体LIST和集成计划见<6月17日发布详细计划>Sheet的E10~E82',
        // planReleaseDate: '2019-06-17', actualReleaseDate: '2019-06-17', releaseStatus: '已发布', functionNum: 20, bugNum: 30},
        // {version: '2.0', goal: '功能集成：全Feature97件，本次发布7件，全功能完成度达到88%',
        // releaseContent: '[Bluetooth設定]等7件Feature编码完成，单元测试实施完毕，基本动作OK。具体LIST和集成计划见<6月24日发布详细计划>Sheet的E10~E16',
        // planReleaseDate: '2019-06-17', actualReleaseDate: '2019-06-24', releaseStatus: '已发布', functionNum: 10, bugNum: 35},
        // {version: '3.0', goal: '功能集成：全Feature97件，本次发布12件，全功能完成度达到100%',
        // releaseContent: '[Bluetooth設定]等12件Feature编码完成，单元测试实施完毕，基本动作OK。具体LIST和集成计划见<7月1日发布详细计划>Sheet的E10~E21',
        // planReleaseDate: '2019-08-15', actualReleaseDate: '', releaseStatus: '未发布', functionNum: 20, bugNum: 30},
        // {version: '4.0', goal: '功能集成：全Feature97件，本次发布12件，全功能完成度达到100%',
        // releaseContent: '[Bluetooth設定]等12件Feature编码完成，单元测试实施完毕，基本动作OK。具体LIST和集成计划见<7月1日发布详细计划>Sheet的E10~E21',
        // planReleaseDate: '2019-08-15', actualReleaseDate: '2019-08-16', releaseStatus: '未发布', functionNum: 20, bugNum: 30},
        // {version: '5.0', goal: '功能集成：全Feature97件，本次发布12件，全功能完成度达到100%',
        // releaseContent: '[Bluetooth設定]等12件Feature编码完成，单元测试实施完毕，基本动作OK。具体LIST和集成计划见<7月1日发布详细计划>Sheet的E10~E21',
        // planReleaseDate: '2019-08-15', actualReleaseDate: '2019-08-17', releaseStatus: '未发布', functionNum: 20, bugNum: 30},
        // {version: '6.0', goal: '功能集成：全Feature97件，本次发布12件，全功能完成度达到100%',
        // releaseContent: '[Bluetooth設定]等12件Feature编码完成，单元测试实施完毕，基本动作OK。具体LIST和集成计划见<7月1日发布详细计划>Sheet的E10~E21',
        // planReleaseDate: '2019-08-15', actualReleaseDate: '2019-08-18', releaseStatus: '未发布', functionNum: 20, bugNum: 30}
      ],
      histogramChartSettings: {
        labelMap: {'expect': '预期投入', 'actual': '工数投入'}
      },
      histogramChartData: {
        columns: ['month','expect','actual'],
        rows: []
      },
      chartColor: ['#7cb5ec', '#22BAA0'],
      scoreChartSettings: {
        labelMap: {'devops_mark': '持续集成评分', 'dev_qa_mark': '研发质量评分', 'test_qa_mark': '测试质量评分'}
      },
      scoreChartData: {
        columns: ['week', 'devops_mark', 'dev_qa_mark', 'test_qa_mark'],
        rows: []
      },
      pieSettings: {
        radius: 100
      },
      caseChartData: {
        columns: ['stage', 'rate',],
        rows: []
      },
      testChartData: {
        columns: ['stage', 'rate',],
        rows: []
      },
      taskData: {
        almostOverdue: 0,
        month: 0,
        overdue: 0,
        week: 0
      },
      exceptionData: {
        count: 0
      }
    }
  },
  methods: {
    handleChange() {

    },
    handleChange2() {

    },
    workChange(val) {
      val == '按月' ? this.type = 'month' : this.type = 'day'
      this.getHoursTrend()
    },
    getWoringHours() {
      http.get(`${process.env.VUE_APP_KANBAN_HOST}/api/resource/labor/input/summary?projectId=${this.filters.projectId}&date=${this.filters.time}`)
      .then(res => {
          if(res.code === 200) {
              this.workingHours = res.total_hours + '人/月'              
          }
      })
    },
    getHoursTrend() {
      this.workLoading = true
      http.get(`${process.env.VUE_APP_KANBAN_HOST}/api/resource/labor/input/trend?projectId=${this.filters.projectId}&date=${this.filters.time}&type=${this.type}`)
      .then(res => {
          if(res.code === 200) {
              this.workLoading = false
              this.workTrend.rows = res.data
              if(!this.workTrend.rows.length) {
                  this.workDataEmpty = true
              } else {
                  this.workDataEmpty = false
              }
          } else {
              this.workLoading = false
              this.workDataEmpty = true
          }
      }).catch(error => {
          this.workLoading = false
          this.workDataEmpty = true
      })
    },
    filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
    filterStatus(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
    filterObject: function(filterChange) {
      if(!this.filters.radio) {
        this.init_project_data()
        this.get_mark_data()
        this.getProjectDetail()
      }     
    },
    getFix(float, type='float') {
      if (null == float || "undefined" == typeof(float) || "" == float) {
        return 0;
      } else {
        if (type === 'float') {
          return float
        } else if (type === 'percent') {
          return (float*100).toFixed(2)+'%';
        } else {
          return float
        }
        
      }
    },
    getProjectDetail() { // process.env.VUE_APP_KANBAN_HOST
      var source = `${process.env.VUE_APP_KANBAN_HOST}/api/summary/get_project_detail?projectId=${this.filters.projectId}&time=${this.filters.time}`
      this.$axios.get(source, {headers: getHeader()})
        .then((response) => {
            if (response.status == 200) {
                if(response.data.code == 200) {
                  this.project_detail = response.data.detail;
                  this.getStageValue(this.project_detail.project_cur_phase);
                }
            }
        })
        .catch((err) => {
            // eslint-disable-next-line
            console.log(err);
        });   
    },
    get_mark_data: function(time) {
      this.scoreChartData.rows = []
      var url = `${process.env.VUE_APP_KANBAN_HOST}/api/base/get_project_scores/${this.filters.projectId}?date=${this.filters.time}`
      this.$axios
        .get(url, {headers: getHeader()})
        .then((response) => {
          if (response.data.code == 200) {
            var data = response.data.mark_trend
            this.scoreChartData.rows = data
          } else {
            this.scoreDataEmpty = true
          }
        })
    },
    get_task_data: function(date) {   
      this.taskData = {
        almostOverdue: 0,
        month: 0,
        overdue: 0,
        week: 0
      }
      let url = ''
      if(date) {
        url = `${process.env.VUE_APP_KANBAN_HOST}/api/summary/task?projectId=${this.filters.projectId}&date=${date}`
      } else {
        url = `${process.env.VUE_APP_KANBAN_HOST}/api/summary/task?projectId=${this.filters.projectId}`
      }     
      this.$axios
				.get(url, {headers: getHeader()})
				.then(response => {
          if (response.data.code == 200) {
            this.taskData = response.data.data
          }
        })
    },
    get_exception_data: function(date) {
      this.exceptionData = {
        count: 0
      }
      let url = ''
      if (date) {
        url = `${process.env.VUE_APP_KANBAN_HOST}/api/summary/exceptions?projectId=${this.filters.projectId}&date=${date}`
      } else {
        url = `${process.env.VUE_APP_KANBAN_HOST}/api/summary/exceptions?projectId=${this.filters.projectId}`
      }       
      this.$axios
				.get(url, {headers: getHeader()})
				.then(response => {
          if (response.data.code == 200) {
            this.exceptionData = response.data.data
          }
        })
    },
    getStageValue: function(val) {
      var stepInfo = [
				'TG0',
				'TG1',
				'TG2',
				'TG3.1',
				'TG3.2',
				'TG4.1',
				'TG4.2',
				'TG5',
				'TG6'
      ]
      var step = stepInfo.indexOf(val)    
      if (step == -1) {
        this.percentStep = 0
        this.projectProgress = '0%'
      } else {
        let stepPercent = Math.round((step + 1) / stepInfo.length * 100)
        this.projectProgress = stepPercent + '%'
        this.percentStep = stepPercent
      }
      this.project_step = step
    },
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(144, 196, 248);color: #fff;'
      }
    },
    init_project_data: function () {
      var time = this.filters.time
      if (time == null || typeof(time) == "undefined" || time == "null") {
          time = ''
      }
      this.get_task_data(time)
      this.get_mark_data(time)
      this.get_exception_data(time)
    },
    onTotalBug(totalBug) {
      this.total_bug = totalBug
    }
  },
  computed: {
    ...mapState({
      filters: state => state.filters
    })
  },
  created() {
    // this.project_id = this.$route.params.pmsProjectId;
  },
	mounted() {
    if(!this.filters.radio) {
      // this.init_project_data()
      // // this.get_mark_data()
      // this.getProjectDetail()

      this.getWoringHours()
          this.getHoursTrend()
          this.init_project_data() 
          this.get_mark_data()
          this.getProjectDetail() 
    }
  },
  watch: {
    // filters: {
    //   handler: function(newVal) {
    //     if(!this.filters.radio) {
    //       this.getWoringHours()
    //       this.getHoursTrend()
    //       this.init_project_data() 
    //       this.get_mark_data()
    //       this.getProjectDetail()         
    //     }
    //   },
    //   deep: true,
    // },
    checked() {
      if (this.checked) {
          this.value2 = []
      } else {
          this.value = []
      }
    }
  }
};
</script>

<style scoped>
.container-wrapper{
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
.ibox{
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
}
.ibox-title{
  background-color: #ffffff;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 2px 0 0;
  color: inherit;
  margin-bottom: 0;
  padding: 15px 90px 8px 15px;
  min-height: 48px;
  position: relative;
  clear: both;
}
.ibox-title h5{
  display: inline-block;
  font-size: 14px;
  margin: 0 0 7px;
  padding: 0;
  text-overflow: ellipsis;
  float: none;
}
.ibox-title a{
  color: #337ab7;
  cursor: pointer;
  font-size: 13px;
}
.ibox-content {
  background-color: #ffffff;
  color: inherit;
  padding: 15px 20px 20px 20px;
  border-color: #e7eaec;
  border-image: none;
  border-style: solid solid none;
  border-width: 1px 0;
  clear: both;
}
.ibox-heading {
  background-color: #f3f6fb;
  border-bottom: none;
}
.red{
  color: red;
}
</style>

